<template>
  <div
    class="app-container flex flex-direction flex-sub"
    style="background: none; height: 100%; padding: 1rem"
  >
    <el-card shadow="never" class="box-card flex-sub" style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header" @click="panelActive = !panelActive">
            <i
              class="collapse-header-icon"
              :class="[
                panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
              ]"
            />
            {{ panelActive ? '隐藏' : '展开' }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small" label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="设备名称" label-width="80px">
                        <el-input
                          v-model="form.deviceName"
                          placeholder="请输入设备名称"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="告警地点" label-width="80px">
                        <el-input
                          v-model="form.deviceAddress"
                          placeholder="请输入告警地点"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="告警类型" label-width="80px">
                        <el-select
                          v-model="form.deviceStatus"
                          placeholder="请选择告警类型"
                          clearable
                        >
                          <el-option
                            v-for="item in deviceStatusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="告警状态" label-width="80px">
                        <el-select
                          v-model="form.solveStatus"
                          placeholder="请选择告警状态"
                          clearable
                        >
                          <el-option
                            v-for="item in alertStatusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="告警时间" label-width="80px">
                        <el-date-picker
                          v-model="createdTime"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          clearable
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item style="margin-left: 10px">
                        <el-button
                          type="primary"
                          icon="el-icon-search"
                          @click="search"
                          size="small"
                          style="margin-right: 10px"
                          >搜索</el-button
                        >
                        <el-button
                          icon="el-icon-delete"
                          @click="reset"
                          type="info"
                          size="small"
                          style="margin-right: 10px"
                          >重置</el-button
                        >

                        <el-button size="small" @click="getDataList">
                          <i class="el-icon-refresh" style="color: #606266" />
                          <span style="color: #606266">刷新</span>
                        </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <div style="margin-bottom: 8px">
        <el-button size="small" type="danger" @click="openDeleteDialog">
          <!-- <i
            class="iconfont icon-xiaochujingbao"
            style="font-size: 10px; margin-right: 3px"
          /> -->
          <img
            :src="eliminateIcon1"
            style="
              position: relative;
              width: 12px;
              height: 12px;
              top: 1px;
              margin-right: 1px;
            "
          />
          批量消警</el-button
        >
      </div>

      <el-table
        size="medium"
        :data="dataList"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        border
        fit
        :default-sort="{ prop: 'createdTime', order: 'descending' }"
        :header-cell-style="{ background: '#fafafa' }"
      >
        <el-table-column
          type="selection"
          align="center"
          fixed
          :selectable="isChecked"
        >
        </el-table-column>
        <el-table-column
          prop="deviceSource"
          align="center"
          label="设备编码"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="deviceName"
          align="center"
          label="设备名称"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="alertTime"
          align="center"
          label="告警时间"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="deviceAddress" align="center" label="告警地点">
        </el-table-column>
        <el-table-column
          prop="alarmCause"
          align="center"
          label="告警原因"
          width="120"
        >
        </el-table-column>

        <el-table-column align="center" label="告警类型" width="80">
          <template slot-scope="{ row }">
            <el-tag
              size="medium"
              :style="row.deviceStatus | constantKeyTagStyleObj('WARNING_TYPE')"
            >
              {{ localDictChange(row.deviceStatus, deviceStatusList) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="告警状态" width="80">
          <template slot-scope="{ row }">
            <el-tag
              size="medium"
              :style="row.solveStatus | constantKeyTagStyleObj('HANDLE_STATUS')"
            >
              {{ localDictChange(row.solveStatus, alertStatusList) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="confirmTime"
          align="center"
          label="确认时间"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="confirmUser"
          align="center"
          label="确认人"
          width="80"
        >
          <template slot-scope="{ row }">
            {{ userValue(row.confirmUser, operatorList) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="confirmRemark"
          align="center"
          label="确认状态"
          width="80"
        >
        </el-table-column>

        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="{ row }">
            <el-tooltip effect="dark" content="详情" placement="top-start">
              <i
                class="iconfont icon-chakanxiangqing2 i-detail"
                @click="detail(row)"
              />
            </el-tooltip>

            <i
              class="iconfont icon-fengefu i-fengefu"
              v-if="row.eliminateType != 1"
            />
            <el-tooltip effect="dark" content="消除告警" placement="top-start">
              <img
                :src="eliminateIcon"
                style="
                  position: relative;
                  width: 16px;
                  height: 16px;
                  top: 3px;
                  cursor: pointer;
                "
                @click="openDeleteDialog(row)"
                v-if="row.eliminateType != 1"
              />
              <!-- <i
                class="iconfont icon-xiaochujingbao i-detail"
                @click="openDeleteDialog(row)"
                v-if="row.eliminateType != 1"
              /> -->
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pagination.pageNum"
        :limit.sync="pagination.pageSize"
        :page-sizes="pageSizeOptions"
        @pagination="getDataList()"
      />
    </el-card>

    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      width="60%"
      top="80px"
      :before-close="clickCloseBtn"
      :close-on-click-modal="false"
    >
      <div v-if="isDetail">
        <el-container>
          <el-main
            :style="{ 'max-height': maxHeightDialog }"
            class="container-main"
          >
            <div>
              <div class="title">
                <span>基本信息</span>
              </div>
              <el-card
                class="card"
                shadow="never"
                style="border: 0; margin: -8px -12px"
              >
                <div>
                  <el-descriptions border :column="2">
                    <el-descriptions-item>
                      <template slot="label"> 设备名称 </template>
                      {{ alertIsoDetail.deviceName }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 设备编码 </template>
                      {{ alertIsoDetail.deviceSource }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 告警时间 </template>
                      {{ alertIsoDetail.alertTime }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 告警地点 </template>
                      {{ alertIsoDetail.deviceAddress }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 告警原因 </template>
                      {{ alertIsoDetail.eliminateReason }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 告警类型 </template>
                      <el-tag
                        size="medium"
                        :style="
                          alertIsoDetail.deviceStatus
                            | constantKeyTagStyleObj('WARNING_TYPE')
                        "
                        >{{
                          localDictChange(
                            alertIsoDetail.deviceStatus,
                            deviceStatusList
                          )
                        }}</el-tag
                      >
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 告警状态 </template>
                      <el-tag
                        size="medium"
                        :style="
                          alertIsoDetail.solveStatus
                            | constantKeyTagStyleObj('HANDLE_STATUS')
                        "
                        >{{
                          localDictChange(
                            alertIsoDetail.solveStatus,
                            alertStatusList
                          )
                        }}</el-tag
                      >
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label"> 确认时间 </template>
                      {{ alertIsoDetail.confirmTime }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label"> 确认人 </template>
                      {{ userValue(alertIsoDetail.confirmUser, operatorList) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 确认状态 </template>
                      {{ alertIsoDetail.confirmRemark }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </el-card>
            </div>
            <div>
              <div class="title">
                <span>消警信息</span>
              </div>
              <el-card
                class="card"
                shadow="never"
                style="border: 0; margin: -8px -12px"
              >
                <div>
                  <el-descriptions border :column="1">
                    <el-descriptions-item>
                      <template slot="label"> 消警人员 </template>
                      {{
                        userValue(alertIsoDetail.eliminateUser, operatorList)
                      }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 消警原因 </template>
                      {{
                        dictChange(
                          alertIsoDetail.misReport,
                          eliminateReasonList
                        )
                      }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </el-card>
            </div>
          </el-main>
          <el-footer>
            <el-button @click="showDialog = false">关闭</el-button>
          </el-footer>
        </el-container>
      </div>
      <div v-else>
        <el-container>
          <el-main
            :style="{ 'max-height': maxHeightDialog }"
            class="container-main"
          >
            <div class="title">
              <span>填写信息</span>
            </div>
            <el-card class="card" shadow="never" style="background: #fafafa">
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                size="small"
                label-position="right"
                label-width="120px"
              >
                <div>
                  <el-form-item label="消警原因" prop="misReport">
                    <el-select
                      v-model="ruleForm.misReport"
                      placeholder="请选择消警原因"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in eliminateReasonList"
                        :key="item.dictValue"
                        :label="item.dictText"
                        :value="item.dictValue"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="消警备注" prop="eliminateReason">
                    <el-input
                      type="textarea"
                      v-model="ruleForm.eliminateReason"
                      placeholder="请输入消警备注"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="操作人员" prop="eliminateUser">
                    <el-select
                      v-model="ruleForm.eliminateUser"
                      placeholder="请选择操作人员"
                      clearable
                    >
                      <el-option
                        v-for="item in operatorList"
                        :key="item.userId"
                        :label="item.username"
                        :value="item.userId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-form>
            </el-card>
          </el-main>
          <el-footer>
            <el-button @click="cancel('ruleForm')" style="margin-right: 10px"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="
                title == '消除告警隔离'
                  ? handleDelete('ruleForm')
                  : multiDelete('ruleForm')
              "
            >
              确定
            </el-button>
          </el-footer>
        </el-container>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import warningManageApi from '@/api/warning-manage'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import dataTableMixins from '@/mixins/data-table-mixins'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Treeselect,
    Pagination
  },

  mixins: [dataTableMixins],
  data() {
    return {
      eliminateIcon: require('@/assets/alarm_elimination.png'),
      eliminateIcon1: require('@/assets/alarm_elimination1.png'),
      title: null, // 标题
      showDialog: false, // 显示对话框
      isDetail: true, //是否删除
      // 搜索表单
      form: {
        deviceName: '',
        deviceAddress: '',
        deviceStatus: '',
        solveStatus: '',
      },
      ruleForm: {
        eliminateReason: '',
        misReport: '',
        eliminateUser: '',
      },
      id: '',
      eliminateType: 1,
      rules: {
        misReport: [
          { required: true, message: '请输入消警原因', trigger: 'blur' },
        ],
        eliminateReason: [
          { required: true, message: '请输入消警备注', trigger: 'blur' },
        ],
        eliminateUser: [
          { required: true, message: '请选择操作人员', trigger: 'change' },
        ],
      },
      createdTime: null,

      alertIsoDetail: {}, //告警隔离详情
      operatorList: [], //操作人员列表
      eliminateReasonList: [], //消警原因列表

      selectedList: [], //选中列表数据
      deviceStatusList: [
        { label: '报警', value: 2 },
        { label: '故障', value: 1 },
        { label: '反馈', value: 3 },
        { label: '启动', value: 4 },
      ],
      alertStatusList: [
        { label: '未处理', value: 0 },
        { label: '已处理', value: 1 },
      ],
    }
  },
  watch: {},
  created() {
    this.getDataList()
    this.getOperatorList()
    this.getEliminateReasonList()
  },
  mounted() {},
  methods: {
    // 获取列表分页数据
    getDataList() {
      let createdTimeFrom = '',
        createdTimeTo = ''
      if (Array.isArray(this.createdTime)) {
        createdTimeFrom = this.createdTime[0]
        createdTimeTo = this.createdTime[1]
      }

      warningManageApi
        .warnIsolationList({
          ...this.pagination,
          ...this.form,
          alertTimeFrom: createdTimeFrom,
          alertTimeTo: createdTimeTo,
        })
        .then((res) => {
          if (res.status === 200) {
            this.dataList = res.data.data.rows
            this.total = res.data.data.total
          } else {
            this.$message.error('获取服务器列表失败,请重试!')
          }
        })
    },
    // 操作人员列表
    getOperatorList() {
      warningManageApi.getOperatorList().then((res) => {
        if (res.status === 200) {
          // console.log(res, 'xxxxxx')
          this.operatorList = res.data.data.rows
        }
      })
    },
    // 消警原因列表
    getEliminateReasonList() {
      warningManageApi.getEliminateReasonList().then((res) => {
        if (res.status === 200) {
          this.eliminateReasonList = res.data.dictValue
        }
      })
    },
    // 多选
    handleSelectionChange(val) {
      // console.log(val, '选中')
      this.selectedList = val // 存储选中数据
    },
    // 搜索
    search() {
      this.pagination.pageNum = 1
      this.getDataList()
    },

    // 重置
    reset() {
      this.createdTime = null
      Object.keys(this.form).forEach((key) => {
        this.form[key] = null
      })
      Object.keys(this.ruleForm).forEach((key) => {
        this.ruleForm[key] = null
      })
      this.search()
    },
    // 取消
    cancel(formName) {
      Object.keys(this.ruleForm).forEach((e) => {
        this.ruleForm[e] = null
      })
      this.$refs[formName].resetFields()
      this.showDialog = false
    },
    // 关闭按钮
    clickCloseBtn(done) {
      Object.keys(this.ruleForm).forEach((e) => {
        this.ruleForm[e] = null
      })
      done()
    },
    // 打开消警对话框
    openDeleteDialog(val) {
      this.id = val.id
      this.isDetail = false
      if (this.selectedList.length > 0) {
        this.title = '批量消除告警隔离'
        this.showDialog = true
      } else {
        this.$message({
          message: '请先选择要消除的告警隔离！',
          type: 'warning',
        })
      }
    },
    // 消除告警
    handleDelete(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否确认消除?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(
            () => {
              warningManageApi
                .deleteWarnIsolation(this.id, {
                  ...this.ruleForm,
                  eliminateType: this.eliminateType,
                })
                .then((res) => {
                  if (res.status === 200) {
                    this.$message({
                      message: '消除成功!',
                      type: 'success',
                    })
                    this.reset()
                    this.showDialog = false
                    this.isDetail = true
                  } else {
                    this.$message.error('消除失败,请重试!')
                  }
                })
            },
            () => {}
          )
        }
      })
    },
    // 批量消警
    multiDelete(formName) {
      let ids = []
      if (this.selectedList.length == 0) {
        this.$message({
          message: '请选择要消除的告警隔离',
          type: 'warning',
        })
      } else {
        this.selectedList.forEach((e) => {
          ids.push(e.id)
        })
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否消除选中告警隔离?', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(
              () => {
                warningManageApi
                  .deleteWarnIsolation(ids.join(','), {
                    ...this.ruleForm,
                    eliminateType: this.eliminateType,
                  })
                  .then((res) => {
                    if (res.status === 200) {
                      this.$message({
                        type: 'success',
                        message: '消除成功!',
                      })
                      this.isDetail = true
                      this.showDialog = false
                      this.reset()
                    } else {
                      this.$message.error('消除失败,请重试!')
                    }
                  })
              },
              () => {}
            )
          }
        })
      }
    },
    // 详情
    detail(val) {
      warningManageApi.getWarnIsolationDetail({ id: val.id }).then((res) => {
        if (res.status === 200) {
          // console.log(res)
          this.alertIsoDetail = res.data.data[0]
          this.title = '告警隔离详情'
          this.showDialog = true
          this.isDetail = true
        } else {
          this.$message.error('打开详情失败')
        }
      })
    },
    // 告警状态标签样式
    warnStatusTagStyle(val) {
      let type = ''
      switch (val.solveStatus) {
        case 0:
          type = 'danger'
          break
        case 1:
          type = 'success'
          break
      }
      return type
    },
    // 告警类型标签样式
    warnTypeTagStyle(val) {
      let type = ''
      switch (val.deviceStatus) {
        case 1:
          type = 'danger'
          break
        case 2:
          type = 'orange'
          break
        case 3:
          type = 'blue'
          break
        case 4:
          type = 'success'
          break
      }
      return type
    },
    // 禁止选中
    isChecked(row) {
      if (row.eliminateType == 1) {
        return false
      }
      return true
    },
    // 字典转换
    localDictChange(val, list) {
      let value = list.find((_val) => {
        return _val.value == val
      })
      if (value) {
        return value.label
      } else {
        return ''
      }
    },
    // 通用字典转换
    dictChange(val, list) {
      let value = list.find((_val) => {
        return _val.dictValue == val
      })
      if (value) {
        return value.dictText
      }
    },
    //确认人、消警人字典转换
    userValue(val, list) {
      let value = list.find((_val) => {
        return val == _val.userId
      })
      if (value) {
        return value.username
      } else {
        return ''
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../../styles/part-custom';
</style>
